// 引入vue
import Vue from 'vue'
// 引入 路由
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 引入基础路由
import basicrouter from './basicRouter'
const router = new VueRouter({
    routes:basicrouter,
    mode:'hash',
    // mode:'history'

  /*
   *  hash模式和hsitory模式的区别:
   *  hash路由在地址栏url上有"#",history模式的路由没有
   *  进行回车刷新操作时,hash路由会加载到地址栏对应的页面，但是history路由一般会出现404错误
   *  hash支持一些低版本的浏览器，但是history不支持(history模式是h5新增的API)
   *  hash特点在于它虽然出现在URL中，但是不包括在http请求中，所以对于后端是没有一点影响的，改变hash值不会重新加载页面，这也是单页面应用的必备
   *  history 运用了浏览器的历史记录栈，包括但不限于 back forward go pushState() repalceState() 方法,这些方法提供了对历史记录进行修改的功能
   *          不过在进行修改时，虽然改变了当前的url，但是浏览器不会立即向后端发送请求
   *  history 模式需要后端进行配置支持，for example: 访问主页面时，程序正常运行，刷新页面时或者直接访问路径时页面会返回404，因为在history
   *          模式下只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当用户在浏览器里输入地址时，就一定
   *          要对服务器发起http请求，但是如果服务器中没有配置这个目标或者目标不存在，就会返回404
   */
})
function isLogin(){
    return localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')).token:""
}
console.log(router);
router.beforeEach((to,from,next)=>{  
    // 在这里执行逻辑
    // 例如 检测用户是否登录
    if(to.path==='/login') return next()
    if(!isLogin())return next('/login')
    next()
})
export default router



